<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		[v-clock]{
			display: none;
		}
		
	</style>
	<body>
		<div id="app" v-cloak>
		{{msg}}、{{name}}、{{hobby}}、{{hobby[2]}}、{{boy}}
		<hr />
		{{car[0].name}}、{{car[0].color}}、{{car[2]}}、{{car[1]}}、{{say()}}
		<hr />
		
		<button @click="whatColor('green1')">点我有惊喜</button>
		<button @click="whatColor('green2')">点我有惊吓</button>
		
		</div>
		<div id="app1">
			<p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p>
			
			<p v-if="age>=18">成年</p>
			<p v-if="age<18">未成年</p>
			<hr />
			<p v-if="salary<=10">普通阶层</p>
			<p v-else-if="salary<=500">中产阶层</p>
			<p v-else="salary>500">富豪阶层</p>
			
			<hr />
			<p v-for="o in hobby">{{o}}</p>
			<p v-for="o,i in  hobby">{{i}}-{{o}}</p>
			
			<hr />
			<button v-on:click="show">点你</button>
			<button  v-on:click="show()">点我</button>
			<button @click="show()">点他</button>
			
			<hr />
			<a v-bind:href="site.url">{{site.name}}</a>
			<a :href="site.url">{{site.name}}</a>
			
			<hr />
			<p v-text="sysname"></p>
			<p v-html="sysname"></p>
		</div>
	
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"我屌你妈的",
				name:"茄子",
				age:"98",
				hobby:["打游戏","杀人","打枪"],
				boy:{
					name:"小明",
					sex:"male",
					age:26
				},
				car:[
					{name:"宝马",color:"黑色"},
					{name:"特斯拉",color:"白色"},
					{name:"奥迪",color:"蓝色"}
				]
			},
			methods:{
				say:function(){
					alert("你瞅啥，再瞅一个试试")
				},
				wcolor:function(color){
					alert("vue"+color)
				}
			}
			
		})
		
		new Vue({
			el:"#app1",
			data:{
				sysname:"<b>京淘</b>电商平台",
				age:16,
				salary:900,
				hobby:["兵乓","爬山","唱歌"],
				site:{
					name:"淘宝网站",
					url:"http://www.897zz.com"
				}
			},
			methods:{
				show:function(){
					console.log("我是你爸爸")
				}
			}
		})
		
	</script>
</html>
